import './App.css';
import Button from "./components/Button"
import ElButton from './components/ElButton'
import Card from './components/Card'

// import MovieList from './pages/MovieList'
// import MovieDetail from './pages/MovieDetail'
// import ShopCart from './pages/ShopCart'

import { Outlet ,Link} from "react-router-dom";// 导入你的路由组件

function App() {
  return (
    <div className="App">
      <h2>按钮</h2>
      <h3>方式1</h3>
      <Button type="default" text="默认"></Button>
      <Button type="primary" text="主要的"></Button>
      <Button type="success">成功的</Button>
      <Button type="info">主要的</Button>
      <Button type="warning">成功的</Button>
      <Button type="danger">成功的</Button>
      
      <h3>方式2-推荐</h3>
      <ElButton type="default">按钮1</ElButton>
      <ElButton type="primary" ghost={true}>按钮2</ElButton>
      <ElButton type="success" ghost>success</ElButton>
      <ElButton type="info" ghost>info</ElButton>
      <ElButton type="warning" ghost>warning</ElButton>
      <ElButton type="danger" ghost>danger</ElButton>

      <h3>圆角按钮</h3>
      <ElButton type="warning" radius={true}>圆角01</ElButton>
      <ElButton type="danger" radius>圆角02</ElButton>
      
      <hr /> 
      <h2>卡片组件</h2>

      <Card title='早餐' extra={<a href="#">更多</a>}>
          <ElButton type="default">按钮1</ElButton>
          <ElButton type="primary" ghost={true}>按钮2</ElButton>
      </Card>

      <Card extra={<button>更多</button>}>
          <p>1</p>
          <p>2</p>
      </Card>

      <Link to="/">首页（App.js）</Link> &nbsp;&nbsp;
      <Link to="/movie_list" >电影列表</Link>&nbsp;&nbsp;
      {/* <Link to="/movie_detail" >电影详细</Link> */}
      <Link to="/cart" >购物车</Link>&nbsp;&nbsp;&nbsp;&nbsp;
      <Link to="/async" >ReduxToolkit处理异步操作</Link>

      {/*<h2>请求API(豆瓣电影)</h2>*/}
      {/* <MovieList />
      <MovieDetail/> */}
      <Outlet />

      {/*<h2>购物车(ReduxToolkit)</h2>*/}
      {/* <ShopCart /> */}

    </div>
  );
}

export default App;
